import React, { Component } from 'react';
import { getZuixinsong } from '../../utils/api';
import { bus } from '../../utils/eventBus';
import '../../style/all.css';
import './Zuixinsong.css';

export default class Zuixinsong extends Component {
	state = {
		currentType: 0,
		songsList: [],
		currentPageNum: 1,
		offset: 20,
		songsListLength: 0,
		currentList: []
	}
	componentDidMount () {
		window.scroll(0, 0);
		this.getZuixinsongs();
	}
	async getZuixinsongs () {
		let { currentPageNum, offset } = this.state;
		const songs = await getZuixinsong(this.state.currentType);
		this.setState({
			songsList: songs.data,
			currentList: songs.data.slice(0, currentPageNum * offset),
			songsListLength: songs.data.length,
		})
	}
	async changeCType (type) {
		const songs = await getZuixinsong(type);
		this.setState({
			songsList: songs.data,
			currentList: songs.data.slice(0, 1 * this.state.offset),
			currentType: type,
			currentPageNum: 1,
			songsListLength: songs.data.length
		})
	}
	goPrev = () => {
		let { songsList, currentPageNum, offset } = this.state;
		this.setState({
			currentPageNum: currentPageNum - 1,
			currentList: songsList.slice(((currentPageNum - 2) * offset), ((currentPageNum - 1) * offset))
		})
	}
	goNext = () => {
		let { songsList, currentPageNum, offset } = this.state;
		this.setState({
			currentPageNum: currentPageNum + 1,
			currentList: songsList.slice((currentPageNum * offset), (currentPageNum + 1) * offset)
		})
	}
	render () {
		let { currentType, currentList, currentPageNum, songsListLength, offset } = this.state;
		return (
			<div className='song main'>
				<div className='song_tag'>
					<ul>
						<li onClick={() => { this.changeCType(0) }} className={currentType === 0 ? 'active red' : 'red'}>全部</li>
						<li onClick={() => { this.changeCType(7) }} className={currentType === 7 ? 'active red' : 'red'}>华语</li>
						<li onClick={() => { this.changeCType(96) }} className={currentType === 96 ? 'active red' : 'red'}>欧美</li>
						<li onClick={() => { this.changeCType(8) }} className={currentType === 8 ? 'active red' : 'red'}>日本</li>
						<li onClick={() => { this.changeCType(16) }} className={currentType === 16 ? 'active red' : 'red'}>韩国</li>
					</ul>
				</div>
				<div className='song_list'>
					<h2>
						<span>id</span>
						<span>音乐标题</span>
						<span>歌手</span>
						<span>专辑</span>
						<span>时长</span>
					</h2>
					<ul>
						{currentList.map((item, index) => (
							<li key={item.id} onClick={() => { bus.emit('syplay', { id: item.id, duration: item.duration, name: item.name, artist: item.artists[0].name }) }}>
								<span>{index + 1}</span>
								<span>{item.name}</span>
								<span className='red' onClick={() => { this.props.history.push(`search?keywords=${item.artists[0].name}&type=1`) }}>{item.artists[0].name}</span>
								<span>{item.album.name}</span>
								<span>{"0" + Math.floor((item.duration / 1000) % 3600 / 60) + ':' + (Math.floor((item.duration / 1000) % 60) < 10 ? '0' + Math.floor((item.duration / 1000) % 60) : Math.floor((item.duration / 1000) % 60))}</span>
							</li>
						))}
					</ul>
				</div>
				<div className='page'>
					{currentPageNum < 2 ? null : <span onClick={this.goPrev}>&lt;前往上一页</span>}
					{(Math.ceil(songsListLength / offset)) <= currentPageNum ? null : <span onClick={this.goNext}>前往下一页&gt;</span>}
				</div>
			</div>
		)
	}
}
